import React, {useEffect, useState} from 'react';
import Sider from 'antd/es/layout/Sider';
import {Menu} from 'antd';
import {useModel} from 'umi';
import styles from './index.less';
import * as Icons from '@ant-design/icons';
import {MenuInfo, MenuInterface} from '@/types/interface/menu.interface';
import {getOpenKeys, searchRoute} from '@/utls/menu/menu-router.utl';
import {useNavigate} from 'umi';
import {getMenu} from '@/services/layout.service';
import {useLocation} from '@@/exports';

const LayoutSider = () => {
    const {collapsed} = useModel('layoutModel');
    const [menuList, setMenuList] = useState<Array<MenuInterface>>();
    const customIcons: { [key: string]: any } = Icons;
    const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<Array<string>>([]);
    const [openKeys, setOpenKeys] = useState<string[] |undefined>([]);
    const navigate = useNavigate();
    const {pathname} = useLocation();

    //把menuItem的path作为key
    const getItem = (param: MenuInterface, key: string, icon: React.ReactNode, children?: Array<MenuInterface>): MenuInterface => {
        const {path, label} = {...param};
        return {path, label, key, icon, children};
    };

    //把菜单string转成React.ReactNode
    const addIcon = (name: string): React.ReactNode | null => {
        return name ? React.createElement(customIcons[name]) : null;
    };

    //处理菜单
    const deepLoopMenuList = (param: Array<MenuInterface>, newArr: Array<MenuInterface> = []): Array<MenuInterface> => {
        param.forEach(item => {
            if (!item.children?.length) {
                return newArr.push(getItem(item, item.path, addIcon(item.icon as string)));
            }
            newArr.push(getItem(item, item.path, addIcon(item.icon as string), deepLoopMenuList(item.children)));
        });
        return newArr;
    };

    const menuItemClick = (param: MenuInfo) => {
        const chooseRouterItem = searchRoute(param, menuList);
        if (chooseRouterItem) {
            navigate(chooseRouterItem.path);
        }
    };
    const onOpenChange = (openKeys: string[]) => {
        if (openKeys.length === 0 || openKeys.length === 1) {
            return setOpenKeys(openKeys);
        }
        const latestOpenKey = openKeys[openKeys.length - 1];
        if (latestOpenKey.includes(openKeys[0])) {
            return setOpenKeys(openKeys);
        }
        setOpenKeys([latestOpenKey]);
    };
    useEffect(() => {
        setDefaultSelectedKeys([pathname]);
        collapsed ? setOpenKeys(undefined) : setOpenKeys(getOpenKeys(pathname));
    }, [pathname, collapsed]);
    useEffect(() => {
        getMenu().then((res) => {
            setMenuList(deepLoopMenuList(res));
        });
    }, []);

    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <div className={styles.logo}/>
            <Menu
                theme="dark"
                mode="inline"
                items={menuList}
                selectedKeys={defaultSelectedKeys}
                onClick={menuItemClick}
                onOpenChange={onOpenChange}
                openKeys={openKeys}
            />
        </Sider>
    );
};
export default LayoutSider;
